<script setup lang="ts">
import gsap from 'gsap'
import { useSound } from '@vueuse/sound'
import buttonSfx from '@/assets/sound/button_click.mp3'

const { play } = useSound(buttonSfx)

const showLoading = ref(true)
onMounted(() => {
  setTimeout(() => {
    showLoading.value = false
    gsap.timeline()
      .from('#title', { x: '-100%', duration: 0.3, ease: 'back.out(1,0.3)' })
      .from('#subtitle', { x: '110%', duration: 0.3, delay: -0.1, ease: 'back.out(1,0.3)' })
      .from('#title-bg', { x: '-100%', duration: 0.3, delay: -0.1, ease: 'back.out(1,0.3)' })
      .from('#grand-fa', { x: '-100%', duration: 1, rotateZ: '-15deg', delay: -0.1, ease: 'elastic.out(1,0.6)' })
      .from('#grand-ma', { x: '100%', duration: 1, rotateZ: '15deg', delay: -0.8, ease: 'elastic.out(1,0.6)' })
      .from('#dialog-box', { opacity: 0, scale: 0, duration: 1.1, delay: -0.9, ease: 'elastic.out(1,0.3)' })
  }, 3000)
})

const router = useRouter()
const route = useRoute()

const coverList = [
  {
    name: '课程标题示例',
    titleImg: '课程大标题图片',
    path: '你需要点击开始后跳转的地址',
  },

  {
    name: '导入剪辑',
    titleImg: new URL('@/assets/common/title/title_02.png', import.meta.url).href,
    path: '/01',
  },
  {
    name: '添加背景音乐',
    titleImg: new URL('@/assets/common/title/title_03.png', import.meta.url).href,
    path: '/02',
  },
  {
    name: '素材编辑（上）',
    titleImg: new URL('@/assets/common/title/title_04.png', import.meta.url).href,
    path: '/03',
  },
  {
    name: '素材编辑（下）',
    titleImg: new URL('@/assets/common/title/title_05.png', import.meta.url).href,
    path: '/04',
  },
  {
    name: '添加文字',
    titleImg: new URL('@/assets/common/title/title_06.png', import.meta.url).href,
    path: '/05',
  },
  {
    name: '四季效果制作',
    titleImg: new URL('@/assets/common/title/title_07.png', import.meta.url).href,
    path: '/06',
  },
  {
    name: '动画',
    titleImg: new URL('@/assets/common/title/title_08.png', import.meta.url).href,
    path: '/07',
  },
  {
    name: '转场',
    titleImg: new URL('@/assets/common/title/title_09.png', import.meta.url).href,
    path: '/08',
  },
  {
    name: '制作三分屏',
    titleImg: new URL('@/assets/common/title/title_10.png', import.meta.url).href,
    path: '/09',
  },
  {
    name: '制作电子相册',
    titleImg: new URL('@/assets/common/title/title_11.png', import.meta.url).href,
    path: '/10',
  },
  {
    name: '线性蒙版',
    titleImg: new URL('@/assets/common/title/title_12.png', import.meta.url).href,
    path: '/11',
  },
  {
    name: '镜面蒙版',
    titleImg: new URL('@/assets/common/title/title_13.png', import.meta.url).href,
    path: '/12',
  },
  {
    name: '常规变速',
    titleImg: new URL('@/assets/common/title/title_14.png', import.meta.url).href,
    path: '/13',
  },
  {
    name: '曲线变速',
    titleImg: new URL('@/assets/common/title/title_01.png', import.meta.url).href,
    path: '/14',
  },
  {
    name: '定格',
    titleImg: new URL('@/assets/common/title/title_15.png', import.meta.url).href,
    path: '/15',
  },
  {
    name: '倒放',
    titleImg: new URL('@/assets/common/title/title_16.png', import.meta.url).href,
    path: '/16',
  },
  {
    name: '智能抠像',
    titleImg: new URL('@/assets/common/title/title_17.png', import.meta.url).href,
    path: '/17',
  },
  {
    name: '自定义抠像',
    titleImg: new URL('@/assets/common/title/title_18.png', import.meta.url).href,
    path: '/18',
  },
  {
    name: '色度抠图',
    titleImg: new URL('@/assets/common/title/title_19.png', import.meta.url).href,
    path: '/19',
  },
  {
    name: '人物美颜',
    titleImg: new URL('@/assets/common/title/title_20.png', import.meta.url).href,
    path: '/20',
  },
  {
    name: '景物调色',
    titleImg: new URL('@/assets/common/title/title_21.png', import.meta.url).href,
    path: '/21',
  },
  {
    name: '添加画布背景（上）',
    titleImg: new URL('@/assets/common/title/title_22.png', import.meta.url).href,
    path: '/22',
  },
  {
    name: '添加画布背景（下）',
    titleImg: new URL('@/assets/common/title/title_23.png', import.meta.url).href,
    path: '/23',
  },
  {
    name: '贴纸马赛克',
    titleImg: new URL('@/assets/common/title/title_24.png', import.meta.url).href,
    path: '/24',
  },
  {
    name: '特效马赛克',
    titleImg: new URL('@/assets/common/title/title_25.png', import.meta.url).href,
    path: '/25',
  },
]

const currentCover = coverList[route.params.order] || {}

// 记录开始学习时间
const passTT = useStorage('pass-tt', Date.now(), sessionStorage)

function playBg() {
  const player = document.querySelector('#bgPlayer')!
  player.volume = 0.4
  player.play()
}

function toDesktop() {
  play()
  playBg()
  router.push({
    path: '/desktop',
    query: {
      path: currentCover.path,
    },
  })
  passTT.value = Date.now()
}

document.title = '剪映学习'
</script>

<template>
  <div class="cover-bg h-full relative overflow-hidden" @click.stop="toDesktop">
    <!-- <h1 style="font-size: 31px; text-align: center;opacity: 0.6;;margin-top: 1vw;">短视频剪辑</h1> -->
    <img src='../../assets/common/clip.png' style="margin: 0 auto;transform: scale(.7);margin-top: 1vw; opacity: .7;" >
    <div id="title-bg" class="title-bg h-14% w-95% absolute top-8% -left-4%" />
    <img id="title" src='@/assets/common/title/title_12.png' style="transform: scale(1.1);" class="w-80% absolute top-7% left-3%">
    <img id="subtitle" src="@/assets/common/subtitle_simulation.png" class="h-7% absolute top-16% right-3%">

    <img id="dialog-box" src="@/assets/common/cover_dialog_box.png" class="w-90% absolute top-23% -right-5%">

    <img id="grand-fa" src="@/assets/common/grandfa.png" class="w-58% absolute -bottom-16% -left-11%">
    <img id="grand-ma" src="@/assets/common/grandma.png" class="w-58% absolute -bottom-14% -right-14%">
    <img src="@/assets/common/app_subtitle.png" class="h-1.9em absolute bottom-1em left-50% inset-inline-30%" style="transform: translate(-50%);">
  </div>

  <AppLoading v-if="showLoading" />

  <!-- css方式预加载资源 -->
  <div class="proload" />
</template>

<style scoped>
.proload {
  visibility: hidden;
  background-image: url('@/assets/common/desktop_bg.jpg'),
    url('@/assets/common/thumb.png'),
    url('@/assets/common/start_create.png');
}

.cover-bg {
  background-image: url('@/assets/common/cover_bg.jpg');
  background-size: 100% 100%;
}

.title-bg {
  background-image: url('@/assets/common/title_bg.png');
  background-size: 100% 100%;
}

.subtitle {
  background-image: url('@/assets/common/subtitle_simulation.png');
  background-size: 100% 100%;
}
</style>
